@import "./common";

.bigpic {
    div {
        img {
            width: 100%;
        }
    }
}

.whitetitle {
    .container {
        padding-top: 90px;
        padding-bottom: 65px;
        .row {
            display: flex;
            display: -webkit-flex;
            align-items: flex-end;
            flex-wrap: wrap;
            .info {
                p {
                    color: #2a2a2a;

                    &:nth-of-type(1) {
                        font-size: 36px;
                        line-height: 100%;
                        margin-bottom: 34px;
                    }

                    &:nth-of-type(2) {
                        font-size: 21px;
                        margin-bottom: 30px;
                    }

                    &:nth-of-type(3),
                    &:nth-of-type(4) {
                        font-size: 14px;
                        text-align: justify;
                        text-indent: 2em;
                    }
                }
            }
            .infoimg{
                img{
                    width: 100%;
                }
            }

        }

    
    }
}

.green{
    background-color: #8cc11f;
    .container{
        padding-top: 115px;
        padding-bottom: 80px;
        .row{
            display: flex;
            display: -webkit-flex;
            align-items: flex-end;
            flex-wrap: wrap;
            font-size: 16px;
            color: white;

            .greenp{
                p{
                    line-height: 170%;
                    margin-bottom: 17px;
                    &:nth-of-type(1){
                        font-size: 36px;
                        margin-bottom: 60px;
                        line-height: 100%;
                    }
                }
            }
            .greenpright{
                p{
                    &:nth-of-type(2){
                        width: 70%;
                        background-color: white;
                        color: #8cc11f;
                        font-size: 24px;
                        line-height: 200%;
                        text-align: center;
                        border-radius: 10px;
                    }
                    &:nth-of-type(3){
                        margin-bottom: 0;
                    }
                }
            }
        }
    }
}

.job{
    .container{
        padding-top: 120px;
        .jobtext{
            padding-bottom: 45px;
            margin-bottom: 73px;
            border-bottom: 1px solid #d2d2d2;

            &:last-of-type{
                border-bottom: 0;
                margin-bottom: 50px;
            }
            h2{
                font-size: 26px;
                color: #8cc11f;
                margin: 0;
                margin-bottom: 40px;
            }
            .SS{
                font-size: 18px;
                margin-bottom: 20px;
            }
            .ss{
                font-size: 14px;
                margin-bottom: 20px;
                text-indent: 1em;
            }
        }
    }
}

.phoneme{
    background-color: #f4f4f4;
    .container{

        .phonetan{
            display: flex;
            display: -webkit-flex;
            flex-wrap: wrap;
            margin-bottom: 40px;
        }
        h2{
            font-size: 36px;
            margin-top: 43px;
            margin-bottom: 39px;
        }
        .row{
            .phonemebox{
                margin-bottom: 20px;
                display: flex;
                display: -webkit-flex;
                justify-content: flex-start;
                align-items: center;
                width: 90%;
                padding: 12px 18px 18px 10px;
                border: 1px solid #e3e3e3;
                font-size: 16px;
                background-color: white;

                p{
                    margin: 0;
                }
                .gpic{
                    width: 15%;
                    margin-right: 14px;
                    img{
                        width: 100%;
                    }
                }
            }
        }
    }
}

@media screen and (max-width:992px){
    .whitetitle{
        .container{
            padding-top: 70px;
            padding-bottom: 45px;
            .row{
                .info {
                    p {
                        &:nth-of-type(1) {
                            font-size: 20px;
                            margin-bottom: 20px;
                        }
    
                        &:nth-of-type(2) {
                            font-size: 16px;
                            margin-bottom: 18px;
                        }
    
                        &:nth-of-type(3),
                        &:nth-of-type(4) {
                            font-size: 12px;
                        }
                    }
                }
            }
        }
    }
    .green{
        .container{
            padding-top: 70px;
            padding-bottom: 50px;
            .row{
                font-size: 12px;
                color: white;
                .greenp{
                    p{
                        line-height: 170%;
                        margin-bottom: 10px;
                        &:nth-of-type(1){
                            font-size: 20px;
                            margin-bottom: 30px;
                            line-height: 100%;
                        }
                    }
                }
                .greenpright{
                    p{
                        &:nth-of-type(2){
                            width: 100%;
                            background-color: white;
                            color: #8cc11f;
                            font-size: 18px;
                            line-height: 200%;
                            text-align: center;
                            border-radius: 10px;
                        }
                        &:nth-of-type(3){
                            margin-bottom: 0;
                        }
                    }
                }
            }
        }
    }

    .phoneme{
        .container{
            h2{
                font-size: 24px;
                margin-top: 23px;
                margin-bottom: 20px;
            }
            .row{
                .phonemebox{
                    font-size: 12px;
                }
                .jobtext{
                    margin-bottom: 30px;
                }
            }
        }
    }
}

@media screen and (max-width:767px){
    .whitetitle{
        .container{
            padding-top: 30px;
            padding-bottom: 15px;
        }
    }

    .green{
        .container{
            padding-top: 40px;
            padding-bottom: 20px;
            .row{
                align-items: center;
                text-align: center;
                .greenpright{
                    p{
                        &:nth-of-type(2){
                            width: 70%;
                            text-align: center;
                            margin: 0 auto 10px;
                            
                        }
                    }
                }
            }
        }
    }

    .job{
        .container{
            padding-top: 30px;

            .jobtext{
                margin-bottom: 20px;

                &:last-of-type{
                    margin-bottom: 0;
                }
            }
        }
    }

    .phoneme{
        .container{
            h2{
                font-size: 24px;
                margin-top: 23px;
                margin-bottom: 20px;
            }

            .row{
                .phonemebox{
                    .gpic{
                        width: 10%;
                    }
                }
            }
        }
    }
}